<template>
  <div class="personalHome">
		<el-tabs >
			<el-tab-pane>
				<span slot="label"><i class="el-icon-user"></i> 基本信息</span>

				<el-descriptions title="用户个人信息" :column="1" border style="width:350px">
						<el-descriptions-item>
							<template slot="label"> <i class="el-icon-user"></i> 姓名 </template>
							{{first_name}}
						</el-descriptions-item>
				</el-descriptions>
				<el-descriptions :column="2" border style="width:525px;">
					<el-descriptions-item>
						<template slot="label"> <i class="el-icon-mobile-phone"></i> 用户名 </template>
						{{username}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label"><i class="el-icon-location-outline"></i> 邮箱 </template>
						{{email}}
					</el-descriptions-item>
				</el-descriptions>
				<el-descriptions :column="2" border style="width:750px;">
					<el-descriptions-item style="width:100px;"> 
						<template slot="label"> <i class="el-icon-mobile-phone"></i> 权限 </template>
						<el-tag size="small">{{is_superuser}}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label"><i class="el-icon-location-outline"></i> 最近登录 </template>
						{{last_login}}
					</el-descriptions-item>
				</el-descriptions>
			</el-tab-pane>

			<el-tab-pane>
				<span slot="label"><i class="el-icon-edit"></i> 修改个人信息</span>
				<el-form ref="form" :model="personalInfForm" label-width="80px">
					<el-form-item label="姓  名">
						<el-input v-model="personalInfForm.first_name"></el-input>
					</el-form-item>
					<el-form-item label="用户名">
						<el-input v-model="personalInfForm.username"></el-input>
					</el-form-item>
					<el-form-item label="邮  箱">
						<el-input v-model="personalInfForm.email"></el-input>
					</el-form-item>	
					<el-form-item label="新密码">
						<el-input v-model="personalInfForm.password" show-password></el-input>
					</el-form-item>		
					<el-form-item label="旧密码">
						<el-input v-model="personalInfForm.oldPassword" show-password></el-input>
					</el-form-item>						
					<el-button style="margin:0 56% 0 44%;" type="primary" @click="editPersonalInf"></el-button>	
				</el-form>
			</el-tab-pane>
		</el-tabs>
    <Footer />
  </div>
</template>

<script>
import Footer from '../components/footer.vue'
export default {
  data() {
    return {
      username: '',
			first_name: '',
			email: '',
			is_superuser: '',
			last_login: new Date(),
			personalInfForm: {
				username: '',
				first_name: '',
				email: '',
				password: '',

				oldUsername: '',
				oldPassword: '',
			},
    };
  },
	components:{
    Footer
  },
	mounted() {
		this.getPersonalInf()
  },
	methods: {
		async getPersonalInf(){
			let res = await this.sendPersonalInfResponse()
			console.log(res);
			this.personalInfForm.oldUsername = this.personalInfForm.username = this.username = res.data.personalInf[0].username
			this.personalInfForm.first_name = this.first_name = res.data.personalInf[0].first_name 
			this.personalInfForm.email = this.email = res.data.personalInf[0].email
			this.is_superuser = res.data.personalInf[0].is_superuser
			this.last_login = res.data.personalInf[0].last_login
		},
		async sendPersonalInfResponse(){
			return await this.$axios.get('http://127.0.0.1:8000/api/getPersonalInf?body=' + localStorage.getItem('userInfo'))
		},

		editPersonalInf(){
			this.$axios.get('http://127.0.0.1:8000/api/editPersonalInf?body=' + JSON.stringify(this.personalInfForm))
				.then((res) => {
					console.log(res);
					if (res.data.msg == 'success') {
						this.$message.success('个人信息修改成功');
						this.personalInfForm.oldPassword = ''
						this.personalInfForm.password = ''
						window.location.reload();
					}else if(res.data.msg == '旧密码错误，请重新输入!'){
						this.$message.error('旧密码错误，请重新输入!');
					}
				})
		},
	}
}
</script>

<style>
.personalHome{
    width: 100%;
    height: 100%;
}
.el-descriptions-item__label {
	width: 100px;
}
</style>